<template>
    <div>
        <h2>计数：{{counter}}</h2>
        <h2>计数 * 2 ：{{ride}}</h2>

        <button @click="add">+1</button>
        <button @click="reduce">-1</button>

        <h2>{{data}}</h2>

        <div class="content">
            <div class="scroll">
                <p class="scroll_x">scroll_x：{{scrollX}}</p>
                <p class="scroll_y">scroll_y：{{scrollY}}</p>
            </div>
        </div>

    </div>
</template>
<script>
// import { ref } from 'vue';

import {
    useCounter,
    useTitle,
    useScrollPosition,
    useSessionStorage
} from './hooks'

export default {
    setup() {

        //counter
        const {counter, ride, add, reduce} = useCounter();

        //title
        const titleRef = useTitle("yzhyzh");    
        setTimeout(() => {
            document.title = "ace"
        }, 3000)

        //滚动位置
        const { scrollX, scrollY } = useScrollPosition();

        //存数据
        const data = useSessionStorage("info", {name: "yzh", age: 18});
        // data.value = "luffy"

        return {
            counter,
            ride,
            add,
            reduce,

            scrollX,
            scrollY,

            data
        }
    }
}
</script>
<style>
.content {
    width: 5000px;
    height: 5000px;
    
}
.scroll {
    position: fixed;
    bottom: 20px;
    right: 80px;
}
</style>
